<!-- 本组件用于驾驶舱经营项目的: 欠款追缴卡片三个点下钻的合同报表(route.query.source == 'debt') 和 专项报表-欠款追缴专项报表（商业事业部专用）- 项目 - 合同报表， 用route的source区分， source = debt代表欠费 -->
<template>
	<div class="zs-table-page-container" v-loading="loading">
		<TableSearch @onSearch="search"></TableSearch>
		<div class="zs-card zs-table-page-content">
			<el-table :data="tableData" class="zs-table-page-main" :stripe="stripe" :cell-class-name="getCellClassName" :header-cell-class-name="getCellHeaderClassName">
				<el-table-column label="序号" width="60" align="center" fixed>
					<template #default="scope">
						{{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
					</template>
				</el-table-column>
				<el-table-column prop="customerName" label="商户名称" align="left" min-width="150" :show-overflow-tooltip="true" fixed></el-table-column>
				<el-table-column prop="brandName" label="品牌" align="left" min-width="150" :show-overflow-tooltip="true" fixed></el-table-column>
				<el-table-column prop="rentArea" label="租赁面积" :align="'right'" min-width="150" fixed></el-table-column>
				<el-table-column label="欠款金额" :align="'right'" min-width="150" :show-overflow-tooltip="true" fixed>
					<template #default="scope">
						<div class="zs-text-blue zs-text-ellipsis zs-pointer" @click="goDetail(scope.row)">{{ scope.row.debtamt ? toThousands(scope.row.debtamt) : '' }}</div>
					</template>
				</el-table-column>
				<el-table-column v-if="isDebt" prop="invRecMargin" label="应收保证金" min-width="120" :align="'right'"></el-table-column>
				<el-table-column prop="invMrgInVerifyAmtL" label="在账保证金" min-width="120" :align="'right'"></el-table-column>
				<el-table-column prop="overMargin" label="是否超保" align="center" min-width="120"></el-table-column>
				<el-table-column v-if="isDebt" prop="debMarginVerifyAmtL" label="超保金额" min-width="120" :align="'right'"></el-table-column>
				<el-table-column prop="contractsStatus" label="合同状态" align="center"></el-table-column>
				<el-table-column label="欠款账龄" align="center">
					<el-table-column prop="debtamt0to30" label="0-30天" :align="'right'" min-width="150" :show-overflow-tooltip="true"></el-table-column>
					<el-table-column prop="debtamt30to90" label="30-90天" :align="'right'" min-width="150" :show-overflow-tooltip="true"></el-table-column>
					<el-table-column prop="debtamt90" label=">90天" :align="'right'" min-width="150" :show-overflow-tooltip="true"></el-table-column>
				</el-table-column>
				<el-table-column v-if="isDebt" prop="currentDebtAmt" label="当年欠款" align="center" min-width="120"></el-table-column>
				<el-table-column v-if="isDebt" prop="historyDebtAmt" label="历史欠款" align="center" min-width="120"></el-table-column>
				<el-table-column label="追缴方案" align="center">
					<el-table-column prop="normalPayment" label="正常追缴" :align="'right'" min-width="150" :show-overflow-tooltip="true"></el-table-column>
					<el-table-column prop="policyReduction" label="政策减免" :align="'right'" min-width="150" :show-overflow-tooltip="true"></el-table-column>
					<el-table-column prop="marginOffset" label="保证金冲抵" :align="'right'" min-width="150" :show-overflow-tooltip="true"></el-table-column>
					<el-table-column prop="billReduction" label="账单调减" :align="'right'" min-width="150" :show-overflow-tooltip="true"></el-table-column>
					<el-table-column v-if="!isDebt" prop="negotiatedSettlement" label="协商解决" :align="'right'" min-width="150" :show-overflow-tooltip="true"></el-table-column>
					<el-table-column v-if="!isDebt" prop="deferredInstalment" label="延期分期" :align="'right'" min-width="150" :show-overflow-tooltip="true"></el-table-column>
					<el-table-column prop="anticipationAction" label="预计诉讼" :align="'right'" min-width="150" :show-overflow-tooltip="true"></el-table-column>
					<el-table-column prop="inLitigation" label="诉讼中" :align="'right'" min-width="150" :show-overflow-tooltip="true"></el-table-column>
				</el-table-column>
				<el-table-column prop="constartDate" label="合同开始" align="center" min-width="120"></el-table-column>
				<el-table-column prop="conendDate" label="合同结束" align="center" min-width="120"></el-table-column>
				<el-table-column prop="contractsCode" label="合同编号" align="left" min-width="124" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="renttypedesc" label="租金架构" align="left" min-width="150" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="paytypename" label="押付比例" align="left" min-width="150" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="isrelationCustomer" label="是否关联方" align="center" min-width="100"></el-table-column>
				<el-table-column prop="islitigation" label="是否诉讼" align="center"></el-table-column>
				<el-table-column prop="issinglerow" label="是否单列" align="center"></el-table-column>
				<el-table-column prop="conshopCode" label="铺位号" align="left" show-overflow-tooltip></el-table-column>
				<el-table-column v-if="isDebt" prop="floorName" label="楼层" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="bizmode" label="资产类型" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="responsiblePerson" label="楼层长" align="center" show-overflow-tooltip></el-table-column>
			</el-table>
			<div class="zs-text-gray-dark zs-text-sm zs-space-top">*面积：㎡；欠款金额：元</div>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>
<script setup>
	import TableSearch from '@/views/Manage/Business/detailPages/debtInformation/component/tableSearch';
	import detailApi from '@/api/Manage/Business/detailPages';
	import { toThousands } from '@/utils/number-util';
	import { ref } from 'vue';
	import { useStore } from 'vuex';
	import { useRoute } from 'vue-router';
	import { useRouter } from 'vue-router';
	const router = useRouter();
	const route = useRoute().query;
	let store = useStore();
	const stripe = ref(true);
	const isDebt = route.source == 'debt' ? true : false;

	let searchCom = ref({});
	let loading = ref(false);
	let tableData = ref([]); // 表格数据

	// 分页
	const curPageSizes = ref(store.state.uiPageSizes);
	let curPageSize = ref(store.state.uiPageSizeDefault);
	let currentPage = ref(1);
	const total = ref(0);
	const handleSizeChange = val => {
		curPageSize.value = val;
		getList(searchCom.value);
	};
	const handleCurrentChange = val => {
		currentPage.value = val;
		getList(searchCom.value);
	};

	const goDetail = row => {
		localStorage.setItem('debitSearchParams', JSON.stringify(searchCom.value));
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'Manage/Business/debtInformation/billArrears',
				rTitle: '欠款追缴费项报表',
				projectCode: searchCom.value.projectCode,
				brandName: row.brandName == '-' ? '' : btoa(encodeURIComponent(row.brandName)),
				sourceType: searchCom.value.sourceType,
			},
		});
	};

	const getList = async value => {
		loading.value = true;
		let res = await detailApi.queryConractListApi({ ...value, pageNo: currentPage.value, pageSize: curPageSize.value });
		if (res.data.code != 200) return;
		initData(res.data.data.childList);
		tableData.value = res.data.data.childList;
		total.value = res.data.data.totalCount;
		loading.value = false;
	};

	const initData = list => {
		let toThousandsFiledArr = ['invMrgInVerifyAmtL', 'invRecMargin', 'debMarginVerifyAmtL', 'currentDebtAmt', 'historyDebtAmt', 'debtamt0to30', 'debtamt30to90', 'debtamt90', 'normalPayment', 'policyReduction', 'marginOffset', 'billReduction', 'negotiatedSettlement', 'deferredInstalment', 'anticipationAction', 'inLitigation'];
		if (list && list.length > 0) {
			list.forEach(item => {
				toThousandsFiledArr.forEach(filed => {
					item[filed] = item[filed] ? toThousands(item[filed]) : '-';
				});
			});
		}
	};

	const getCellClassName = ({ columnIndex }) => {
		let colList = isDebt ? [4, 9, 12, 14, 20, 25, 28, 31] : [3, 6, 9, 17, 23, 26, 28];
		if (colList.includes(columnIndex)) {
			return 'zs-table-cell-border-right';
		}
	};

	const getCellHeaderClassName = ({ columnIndex, rowIndex }) => {
		let colList = isDebt ? [4, 9, 10, 12, 13, 18, 21, 24] : [3, 6, 7, 8, 14, 17, 19];
		if (rowIndex == 0 && colList.includes(columnIndex)) {
			return 'zs-table-cell-border-right';
		}
		if (isDebt) {
			if ((rowIndex == 1 && columnIndex == 2) || (rowIndex == 1 && columnIndex == 8)) {
				return 'zs-table-cell-border-right';
			}
		} else {
			if ((rowIndex == 1 && columnIndex == 2) || (rowIndex == 1 && columnIndex == 10)) {
				return 'zs-table-cell-border-right';
			}
		}
	};

	const search = value => {
		searchCom.value = JSON.parse(JSON.stringify(value));
		tableData.value = [];
		getList(value);
	};
</script>

<style scoped lang="scss">
	:deep(.el-table--group .el-table__cell) {
		border-right: none;
	}

	:deep(.el-table__row .zs-link) {
		cursor: pointer !important;
	}

	:deep(.el-table--group .el-table__inner-wrapper tr:first-child td:first-child) {
		border-left: 0;
	}
</style>
